<template>
  <div>
    <blockComponents :msg="'可选任务节点'"></blockComponents>
    <div class="btn">
      <el-button type="primary" @click="addHandler" class="update"
        >新增</el-button
      >
    </div>
    <div class="main_node_list">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-card shadow="always">
            Always
            <svg-icon
              icon-class="delete-icon"
              class="nodeItem"
              @click="deleteNode"
          /></el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog  class="dialogStyle" v-model="state.centerDialogVisible" title="" align-center>
      <el-form :model="formInline" class="demo-form-inline" label-width="150px">
        <el-form-item label="任务细项节点名称">
          <el-input v-model="formInline.user" placeholder="任务细项节点名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.centerDialogVisible = false" class="button_cancel2">取消</el-button>
          <el-button @click="state.centerDialogVisible = false" class="button_view">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import blockComponents from '@/components/block_components/index.vue'
import { ElRow, ElCol, ElCard, ElMessageBox, ElMessage,ElDialog,ElForm,ElFormItem } from 'element-plus'

const state = reactive({
  centerDialogVisible: false
})
const formInline = reactive({
  user: ''
})
const deleteNode = () => {
  ElMessageBox.confirm('确认删除吗?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // projectConfigApi.prepareRemove(row.projectId || '').then((res) => {
      //   if (res.code == '200') {
      //     ElMessage.success('删除成功')
      //     getPage()
      //   }
      // })
    })
    .catch(() => {})
}
const addHandler = () => {
  //新增
  state.centerDialogVisible = true
}
const getPage = () => {
  //获取列表
}
</script>

<style lang="scss" scoped>
.main_node_list {
  margin-top: 20px;
  .nodeItem {
    float: right;
    cursor: pointer;
  }
}
.btn {
  text-align: right;
}
</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/button.scss';
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
